<template>
  <div id="warp">
    <img src="/images/car1.jpg" alt srcset width="40%"
      @mousedown="setPoint"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    setPoint(e) {
      const c = '<span class="red-ball"></span>';
      const a = document.getElementById('warp');
      const b = document.createElement('span');
      b.className = 'red-ball';

      e = e || window.event;
      const x = e.pageX;
      const y = e.pageY;
      b.style.left = `${x}px`;
      b.style.height = `${y}px;`;
      console.log(e);
      a.appendChild(b);
    },
  },
};
</script>

<style>
#warp {
  position: relative;
}
#warp span.red-ball {
  position: absolute;
  opacity: 0.7;
  border-radius: 100%;
  transition: 0.4s;
  width: 10px;
  height: 10px;
  background: red;
}
</style>
